<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function myAxios (config) {
      // console.log(config, 777);
      return new Promise((resolve, reject) => {
        /* 处理query传参====将params中的参数拼接到url后面即可 */
        if (config.params) {
          const query = new URLSearchParams(config.params)
          console.log(query.toString(), 888);// panme=湖北省&cname=武汉市
          //  http://hmajax.itheima.net/api/city?panme=湖北省&cname=武汉市
          config.url += `?${query.toString()}`//http://hmajax.itheima.net/api/city?panme=湖北省&cname=武汉市
        }
        // config.url=config.url+'?panme=湖北省&cname=武汉市'
        /* XMLHttpRequest 对象 */
        /* 1、创建一个xml对象 */
        const xhr = new XMLHttpRequest()
        /*  2、设置请求方法和地址*/
        // xhr.open('请求方法', '请求地址')
        xhr.open(config.method || 'get', config.url)
        /* 3、监听请求什么时候完成 */
        xhr.addEventListener('loadend', () => {
          /* 获取数据 */
          // console.log(xhr, 23);
          // console.log(JSON.parse(xhr.response), 1111);
          // resolve(JSON.parse(xhr.response))
          if (xhr.status >= 200 && xhr.status < 300) {
            // 表示请求成功
            resolve(JSON.parse(xhr.response))
          } else {
            // 表示请求失败
            reject(new Error(xhr.response))
          }
        })
        /* 4、请求发送 */
        xhr.send()
      })
    }
    myAxios({
      url: 'http://hmajax.itheima.net/api/city',
      params: {
        pname: '湖北省'
      }
    }).then(res => {
      console.log(res, 88);
    })

    myAxios({
      url: 'http://hmajax.itheima.net/api/area',
      params: {
        pname: '湖北省',
        cname: '武汉市'
      }
    }).then(res => {
      console.log(res, 99);
    })

  </script>
</body>

</html>